<template>
  <a-button type="primary" @click="debounceHand" >debounceHand</a-button>
  <div class="box">
    <div class="con"></div>
  </div>
  
</template>
<script lang="ts" setup>
import {debounce} from "lodash"
import {getHttpList} from "@http"

const deb = debounce(async (i,fn) => {
  console.log(i)
  const res = await getHttpList()
  fn(res)
},100)
const debounceHand = async () => {
  deb(1,(re: any) => {
    console.log(re)
  })
  deb(2,(re: any) => {
    console.log(re)
  })
  deb(3,(re: any) => {
    console.log(re)
  })
  deb(4,(re: any) => {
    console.log(re)
  })
  deb(5,(re: any) => {
    console.log(re)
  })
}
</script>
<style lang="less" scoped>
.box{
  position: absolute;
  left: 500px;
  top: 500px;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  .con{
    width: 100%;
    height: 100%;
    border: 1px solid royalblue;
    transform:  translateY(-12.5px) scale(1.25);
  }
}
</style>
